<template>
  <pro-dialog class="setdialog" ref="entrusttModal" width="1000" :nopadding="true"
    :title="`${addAndExit ? '新增' : '编辑'}委托单`">
    <YsTabs value="tab1">
      <YsTabPane label="委托单信息" name="tab1">
        <div style="padding: 10px;background: #fff">
          <YsForm ref="entrustForm" :model="form" :rules="app_rule" label-position="top">
            <YsRow :gutter="16">
              <YsCol span="6">
                <YsFormItem label="委托编号" prop="pd_code">
                  <YsInput :maxlength="20" v-model="form.pd_code"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="工程名称" prop="pd_name">
                  <YsInput :maxlength="20" v-model="form.pd_name"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="单位名称" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="检件名称" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="6">
                <YsFormItem label="检测地点" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="焊接方法" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="完成日期" prop="pd_customer">
                  <YsDatePicker type="date" @on-change="form.production_date = $event" :transfer="true"
                    format="yyyy-MM-dd" v-model="form.production_date" style="width: 100%">
                  </YsDatePicker>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="检测方法" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="6">
                <YsFormItem label="检测比例" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="检测时机" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="执行标准" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="合格级别" prop="level">
                  <Select clearable v-model="form.level">
                    <Option v-for="(item, index) in levelList" :value="item.state" :key="index" :label="item.name">
                      {{ item.name }}
                    </Option>
                  </Select>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="6">
                <YsFormItem label="委托单位(承包商)" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="完成日委托人/日期" prop="pd_customer">
                  <YsDatePicker type="date" @on-change="form.production_date = $event" :transfer="true"
                    format="yyyy-MM-dd" v-model="form.production_date" style="width: 100%">
                  </YsDatePicker>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="第三方无损检测单位" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="6">
                <YsFormItem label="接收人/日期" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="6">
                <YsFormItem label="监理机构工程师/日期" prop="pd_customer">
                  <YsInput :maxlength="20" v-model="form.pd_customer"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="18">
                <YsFormItem label="监理机构意见" prop="pd_customer">
                  <YsInput v-model="form.remark" :class="curTheme" class="input-border" show-word-limit maxlength="30"
                    placeholder="请输入"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
          </YsForm>
          <div class="table-name">检测设备</div>
          <div class="table-box bg_style">
            <YsTable ref="entrustTableRef" class="table-2" :class="curTheme+'-table'" :columns="page.columns" :border="true"
              width="100%" max-height="300" :data="page.data">
              <template #edit="{ row, column }">
                <template v-if="row.edit">
                  <YsInput type="text" v-model="row[column.key]"></YsInput>
                </template>
                <template v-else>
                  <span>{{ row[column.key] }}</span>
                </template>
              </template>
            </YsTable>
          </div>
        </div>
      </YsTabPane>
      <YsTabPane label="检测对象信息" name="tab2">
        <div style="height: 100%;padding: 10px;background: #fff">
          <YsCollapse v-model="panelValue" accordion>
            <YsPanel :name="`${index + 1}`" v-for="(item, index) in jcInfo" :key="index">
              <span class="panel-header">
                <span>检测对象{{ index + 1 }}</span>
                <span>
                  <span style="margin-right:10px" @click.stop="handleAddJcItem(item)">
                    <i class="icon iconfont icon-tianjia"></i>
                  </span>
                  <span @click.stop="handleDelJcItem(item, index)">
                    <i class="icon iconfont icon-a-lujing22614"></i>
                  </span>
                </span>
              </span>
              <template #content>
                <YsForm :ref="'jcForm' + index" :model="item.form" label-position="top">
                  <YsRow :gutter="16">
                    <YsCol span="6">
                      <YsFormItem label="设备号/管线号" prop="sb" :rules="{required: true, message: '设备号/管线号不能为空', trigger: 'blur'}">
                        <YsInput :maxlength="20" v-model="item.form.sb"></YsInput>
                      </YsFormItem>
                    </YsCol>
                    <YsCol span="6">
                      <YsFormItem label="检测工艺" prop="gy" :rules="{required: true, message: '检测工艺不能为空', trigger: 'change'}">
                        <Select clearable v-model="item.form.gy">
                          <Option v-for="(item, index) in jcgyList" :value="item.state" :key="index" :label="item.name">{{
                              item.name
                          }}</Option>
                        </Select>
                      </YsFormItem>
                    </YsCol>
                    <YsCol span="6">
                      <YsFormItem label="承压设备类别" prop="pd_customer">
                        <YsInput :maxlength="20" v-model="item.form.pd_customer"></YsInput>
                      </YsFormItem>
                    </YsCol>
                    <YsCol span="6">
                      <YsFormItem label="焊缝坡口型式" prop="pd_customer">
                        <YsInput :maxlength="20" v-model="item.form.pd_customer"></YsInput>
                      </YsFormItem>
                    </YsCol>
                  </YsRow>
                  <YsRow :gutter="16">
                    <YsCol span="6">
                      <YsFormItem label="热处理状态" prop="sb3">
                        <YsInput :maxlength="20" v-model="item.form.sb3"></YsInput>
                      </YsFormItem>
                    </YsCol>
                    <YsCol span="6">
                      <YsFormItem label="检测部位" prop="gy3">
                        <Select clearable v-model="item.form.gy3">
                          <Option v-for="(item, index) in jcgyList" :value="item.state" :key="index" :label="item.name">{{
                              item.name
                          }}</Option>
                        </Select>
                      </YsFormItem>
                    </YsCol>
                    <YsCol span="6">
                      <YsFormItem label="表面状态" prop="pd_customer">
                        <YsInput :maxlength="20" v-model="item.form.pd_customer"></YsInput>
                      </YsFormItem>
                    </YsCol>
                  </YsRow>
                </YsForm>
                <div class="table-box bg_style">
                  <!-- <proTable :ref="'entrustTableRef' + index" class="border01" :columns="item.table.columns" :data="item.table.data" :has-page="false"></proTable> -->
                  <YsTable :ref="'entrustTableRef' + index"  class="table-2" :class="curTheme+'-table'" :columns="item.table.columns" :border="true"
                    width="100%" max-height="300" :data="item.table.data">
                    <template #edit="{ row, column }">
                      <template v-if="row.edit">
                        <YsInput type="text" v-model="row[column.key]"></YsInput>
                      </template>
                      <template v-else>
                        <span>{{ row[column.key] }}</span>
                      </template>
                    </template>
                  </YsTable>
                </div>
              </template>
            </YsPanel>
          </YsCollapse>
        </div>
      </YsTabPane>
    </YsTabs>
    <YsRow class="foot-btn" style="padding: 0 10px 10px 10px">
      <YsButton @click="handleCancel()">取消</YsButton>
      <YsButton @click="handleOk('entrustForm')" :loading="btnDisabled" type="primary">保存
      </YsButton>
    </YsRow>
  </pro-dialog>
</template>

<script>
import { mapState, mapActions } from "vuex"
import setTime from '@/utils/setTime'
import { cloneDeep } from 'lodash'
export default {
  name: "entrustModal",
  computed: {
    ...mapState(['curTheme']),
  },
  props: {
    data: Object,
    addAndExit: Boolean
  },
  data() {
    return {
      panelValue: "1",
      btnDisabled: false,
      form: {
        pd_code: "",
        pd_name: "",
        pd_customer: "",
        level: "",
        remark: "",
      },
      app_rule: {
        pd_code: [
          { required: true, message: "委托编号不能为空", trigger: "blur" },
        ],
        pd_name: [
          { required: true, message: "工程名称不能为空", trigger: "blur" },
        ],
        level: [
          { required: true, message: "合格级别不能为空", trigger: "change" },
        ],
      },
      levelList: [
        { state: "1", name: "Ⅲ级" },
      ],
      page: {
        tableLoad: false,
        allTotal: 0,
        originalRow: null,
        columns: [
          {
            title: "序号",
            width: 70,
            tooltip: true,
            render: (h, params) => {
              return h("span", params.index + 1)
            },
          },
          {
            title: "检测设备名称",
            minWidth: 100,
            key: "name1",
            tooltip: true,
            slot: "edit",
          },
          {
            title: "检测设备规格",
            key: "name2",
            minWidth: 100,
            tooltip: true,
            slot: "edit",
          },
          {
            title: "射线源",
            key: "name3",
            minWidth: 100,
            tooltip: true,
            slot: "edit",
          },
          {
            title: "胶片",
            key: "name4",
            minWidth: 100,
            tooltip: true,
            slot: "edit",
          },
          {
            title: "增感屏",
            key: "name5",
            minWidth: 100,
            tooltip: true,
            slot: "edit",
          },
          {
            title: "像质计",
            key: "name6",
            minWidth: 100,
            tooltip: true,
            slot: "edit",
          },
          {
            title: "操作",
            width: 150,
            renderHeader: (h, params) => {
              return h('div', {}, [
                h('span', [
                  h('span', '操作'),
                  h('i', {
                    class: 'icon iconfont icon-tianjia',
                    style: {
                      cursor: 'pointer',
                      fontSize: '16px',
                      marginLeft: '5px',
                      marginRight: '14px',
                    },
                    on: {
                      click: (event) => {
                        this.handleAddSbItem()
                        event.stopPropagation()
                      },
                    },
                  })
                ])
              ])
            },
            render: (h, params) => {
              let i = null
              let del = null
              if (params.row.edit) {
                i = h("i", {
                  class: "ivu-icon ivu-icon-md-checkbox-outline",
                  style: {
                    cursor: 'pointer',
                    fontSize: '21px',
                    marginRight: '14px',
                  },
                  on: {
                    click: (event) => {
                      this.handleSaveSbItem(params.row)
                      event.stopPropagation()
                    }
                  }
                })
                del = h("i", {
                  class: "icon iconfont icon-guanbi",
                  style: {
                    cursor: 'pointer',
                    fontSize: '14px',
                    marginRight: '14px',
                  },
                  on: {
                    click: (event) => {
                      this.handleEditSbItem(params.row, false, 1)
                      event.stopPropagation()
                    }
                  }
                })
              } else {
                i = h("i", {
                  class: "icon iconfont icon-bianji",
                  style: {
                    cursor: 'pointer',
                    fontSize: '16px',
                    marginRight: '14px',
                  },
                  on: {
                    click: (event) => {
                      this.handleEditSbItem(params.row, true)
                      event.stopPropagation()
                    }
                  }
                })
              }
              return h("div", [
                i,
                del,
                h("i", {
                  class: "icon iconfont icon-a-lujing22614",
                  style: {
                    cursor: 'pointer',
                    fontSize: '16px',
                  },
                  on: {
                    click: (event) => {
                      this.handleDelSbItem(params.row)
                      event.stopPropagation()
                    },
                  },
                }),
              ])
            },
          },
        ],
        data: [
          {
            name1: "",
            name2: "",
            name3: "",
            name4: "",
            name5: "",
            name6: "",
          }
        ],
      },
      jcgyList: [
        { state: "1", name: "001" },
      ],
      jcItem: {
        form: {
          sb: '',
          gy: '',
        },
        table: {
          originalRow: null,
          columns: [
            {
              title: "序号",
              width: 80,
              tooltip: true,
              render: (h, params) => {
                return h("span", params.index + 1)
              },
            },
            {
              title: "焊口编号/部位编号",
              minWidth: 100,
              key: "name1",
              tooltip: true,
              slot: "edit",
            },
            {
              title: "规格",
              key: "name2",
              minWidth: 100,
              tooltip: true,
              slot: "edit",
            },
            {
              title: "材质",
              key: "name3",
              minWidth: 100,
              tooltip: true,
              slot: "edit",
            },
            {
              title: "焊工号",
              key: "name4",
              minWidth: 100,
              tooltip: true,
              slot: "edit",
            },
            {
              title: "操作",
              width: 150,
              renderHeader: (h, params) => {
                return h('div', {}, [
                  h('span', [
                    h('span', '操作'),
                    h('i', {
                      class: 'icon iconfont icon-tianjia',
                      style: {
                        cursor: 'pointer',
                        fontSize: '16px',
                        marginLeft: '5px',
                        marginRight: '14px',
                      },
                      on: {
                        click: (event) => {
                          this.handleAddJcTable()
                          event.stopPropagation()
                        },
                      },
                    })
                  ])
                ])
              },
              render: (h, params) => {
                let i = null
                let del = null
                if (params.row.edit) {
                  i = h("i", {
                    class: "ivu-icon ivu-icon-md-checkbox-outline",
                    style: {
                      cursor: 'pointer',
                      fontSize: '21px',
                      marginRight: '14px',
                    },
                    on: {
                      click: (event) => {
                        this.handleSaveJcTable(params.row)
                        event.stopPropagation()
                      }
                    }
                  })
                  del = h("i", {
                    class: "icon iconfont icon-guanbi",
                    style: {
                      cursor: 'pointer',
                      fontSize: '14px',
                      marginRight: '14px',
                    },
                    on: {
                      click: (event) => {
                        this.handleEditJcTable(params.row, false, 1)
                        event.stopPropagation()
                      }
                    }
                  })
                } else {
                  i = h("i", {
                    class: "icon iconfont icon-bianji",
                    style: {
                      cursor: 'pointer',
                      fontSize: '16px',
                      marginRight: '14px',
                    },
                    on: {
                      click: (event) => {
                        this.handleEditJcTable(params.row, true)
                        event.stopPropagation()
                      }
                    }
                  })
                }
                return h("div", [
                  i,
                  del,
                  h("i", {
                    class: "icon iconfont icon-a-lujing22614",
                    style: {
                      cursor: 'pointer',
                      fontSize: '16px',
                    },
                    on: {
                      click: (event) => {
                        this.handleDelJcTable(params.row)
                        event.stopPropagation()
                      },
                    },
                  }),
                ])
              },
            }
          ],
          data: [
            {
              name1: "",
              name2: "",
              name3: "",
              name4: "",
            }
          ]
        }
      },
      jcInfo: []
    }
  },
  created() {
    this.jcInfo.push(cloneDeep(this.jcItem))
  },
  methods: {
    ...mapActions(['addSpringProjectAPI', 'editSpringProjectAPI']),
    //确认
    handleOk(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.addAndExit) {
            this.addProbjectItem()
          } else {
            this.exitProbjectItem()
          }
        }
      })
    },
    //取消
    handleCancel() {
      this.$refs.entrusttModal.close()
    },
    //新增
    addProbjectItem() {
      let _this = this
      this.btnDisabled = true
      if (typeof _this.form.production_date === "object") {
        _this.form.production_date = setTime.getNowFormatDate(_this.form.production_date)
      }
      _this.addSpringProjectAPI({ form: _this.form }).then((res) => {
        let { msg, status } = res
        this.btnDisabled = false
        if (status === "ok") {
          _this.$YsMessage.success("新增成功")
          _this.$emit("handleRefresh")
          _this.$refs.entrusttModal.close()
        } else {
          _this.$YsMessage.error(msg)
        }
      }).catch((err) => {
        _this.$YsMessage.error(err)
      })
    },
    //编辑
    exitProbjectItem() {
      let _this = this
      this.btnDisabled = true
      if (typeof _this.form.production_date === "object") {
        _this.form.production_date = setTime.getNowFormatDate(_this.form.production_date)
      }
      _this.editSpringProjectAPI({ form: _this.form }).then((res) => {
        let { msg, status } = res
        this.btnDisabled = false
        if (status === "ok") {
          _this.$YsMessage.success("编辑成功")
          _this.$emit("handleRefresh")
          _this.$refs.entrusttModal.close()
        } else {
          _this.$YsMessage.error(msg)
        }
      }).catch((err) => {
        _this.$YsMessage.error(err)
      })
    },
    // 打开窗口
    open() {
      this.$refs.entrustForm.resetFields()
      this.$refs.entrusttModal.show()
    },
    // 新增委托单信息中的检测设备数据
    handleAddSbItem() {
      this.page.originalRow = null
      this.page.data.push({
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        edit: true,
      })
    },
    // 编辑或取消委托单信息中的检测设备数据
    handleEditSbItem(row, flag, type = 0) {
      if (flag === true) {
        this.page.originalRow = JSON.parse(JSON.stringify(row))
      }
      if (type === 1) {
        this.$set(this.page.data, row._index, {
          ...this.page.originalRow,
          edit: false
        })
        return
      }
      this.$set(row, "edit", flag)
      this.$set(this.page.data, row._index, row)
    },
    // 删除委托单信息中的检测设备数据
    handleDelSbItem(row) {
      this.page.data.splice(row._index, 1)
    },
    // 保存委托单信息中的检测设备数据
    handleSaveSbItem(row) {
      this.handleEditSbItem(row, false)
      // 可能对接接口
    },

    // 新增检测对象信息中的检测对象数据
    handleAddJcItem(item) {
      this.jcInfo.push(cloneDeep(this.jcItem))
    },
    // 删除检测对象信息中的检测对象数据
    handleDelJcItem(item, index) {
      this.jcInfo.splice(index, 1)
    },

    // 新增检测对象信息中的表格数据
    handleAddJcTable() {
      const index = parseInt(this.panelValue[0]) - 1
      this.jcInfo[index].table.originalRow = null
      this.jcInfo[index].table.data.push({
        name1: "1",
        name2: "1",
        name3: "1",
        name4: "5",
        edit: true
      })
    },
    // 编辑或取消检测对象信息中的表格数据
    handleEditJcTable(row, flag, type = 0) {
      const index = parseInt(this.panelValue[0]) - 1
      if (flag === true) {
        this.jcInfo[index].table.originalRow = JSON.parse(JSON.stringify(row))
      }
      if (type === 1) {
        this.$set(this.jcInfo[index].table.data, row._index, {
          ...this.jcInfo[index].table.originalRow,
          edit: false
        })
        return
      }
      this.$set(row, "edit", flag)
      this.$set(this.jcInfo[index].table.data, row._index, row)
    },
    // 删除检测对象信息中的表格数据
    handleDelJcTable(row) {
      const index = parseInt(this.panelValue[0]) - 1
      this.jcInfo[index].table.data.splice(row._index, 1)
    },
    // 保存检测对象信息中的表格数据
    handleSaveJcTable(row) {
      this.handleEditJcTable(row, false)
      // 可能对接接口
    },
  },
  watch: {
    data(nv) {
      this.form = Object.assign(this.form, nv)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ivu-form-item {
  margin-bottom: 12px !important;
}

/deep/ .ivu-form-item-label {
  font-size: 14px !important;
}

.table-name {
  color: #405580;
  margin-bottom: 8px;
}

.table-box {
  width: 100%;
  max-height: 330px;
  border-radius: 4px;
}
.panel-header {
  display: inline-flex;
  width: 93%;
  justify-content: space-between;
  color: #405580;
}
</style>